<template>
  <div class="database-info-main">
    <div class="tool-bar-wrapper">
      <el-icon><Menu /></el-icon>
      <span class="title">数据库</span>
      <div class="button">
        <el-tooltip class="box-item" effect="dark" content="刷新" placement="top">
          <el-button size="small" @click="refreshInfo">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-menu @open="handleOpen" @select="handleSelect" style="height: calc(100% - 38px)" @close="handleClose">
      <div v-for="item in databaseInfo" :key="item">
        <el-menu-item :index="item">
          <el-icon>
            <span class="iconfont icon-OP_Dateshuju"></span>
          </el-icon>
          <span>{{ item }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script setup>
import { defineEmits, onMounted, defineProps, ref } from "vue";
import { showDatabases } from '@/api/index'
const props = defineProps({
  dbInfo: {
    type: Object,
    default: {},
  },
	databaseInfo:{
		type:Array,
		default:[]
	}
});

const connectInfo = {
  info: props.dbInfo,
	databaseInfo: props.databaseInfo
};

onMounted(() => {
  if (connectInfo.info && connectInfo.databaseInfo && connectInfo.databaseInfo == 0) {
    updateDatabaseInfo();
  }else{
		databaseInfo.value = connectInfo.databaseInfo;
	}
});

const databaseInfo = ref([])
const refreshInfo = () => {
  updateDatabaseInfo();
};

const updateDatabaseInfo = (callback) => {
  showDatabases(connectInfo.info)
    .then((res) => {
      if (res.code == 200) {
        databaseInfo.value = res.data;
        if (callback) {
          callback();
        }
      }
    })
    .catch((error) => {
      console.error(error);
    });
};

const emits = defineEmits(["open", "select", "close"]);

const handleClose = (key, keyPath) => {
  emits("close", key, keyPath);
};

const handleOpen = (key, keyPath) => {
  emits("open", key, keyPath);
};

const handleSelect = (key, keyPath) => {
  emits("select", key, keyPath);
};
</script>
<style lang="less" scoped>
.database-info-main {
  width: 100%;
  height: 100%;
  .tool-bar-wrapper {
    height: 38px;
    position: relative;
    padding-left: 20px;
    border-bottom: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
    .title {
      line-height: 38px;
      display: inline-block;
      margin-left: 12px;
    }
    .button {
      position: absolute;
      right: 6px;
      top: 0;
      height: 100%;
      width: 40px;
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
    }
  }
}
</style>
